<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 500px;
            height: 500px;
            background-color: blue;
        }
        p{
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div>i am div
        <p>i am p in div</p>
    </div>

    <script>
        /* 绑定事件 */

        // 1.on()方法绑定事件
        // 1-1.基础绑定事件
        // 语法：元素集合.on('事件类型'，事件处理函数)
        // $('div').on('click',function(){ console.log('我是div 的点击事件')})
        // 1-2.事件委托绑定事件
        // 语法：元素集合.on('事件类型',选择器，事件处理函数)
        // 把事件绑定给 div 元素，当你在 div 内的 p 元素触发事件的时候，执行事件处理函数
        // 事件委托，把 p 元素的事件委托给了 div 元素来绑定
        // $('div').on('click','p',function(){console.log('我是事件委托形式的事件');})
        // 1-3.批量绑定事件
        // 语法：元素集合.on({事件类型1：处理函数，事件类型2：处理函数})
        // 注意：不能进行事件委托
        // $('div').on({
        //     click:function(){console.log('点击事件');},
        //     mouseover:function(){console.log('鼠标移入事件');},
        //     mouseout:function(){console.log('鼠标移出事件');}
        // })
        


        // 2. one()
        // 用来绑定事件，和 on 绑定事件的方式是一样的
        // 区别：one 方法绑定的事件，只能执行一次
        // 2-1.基础绑定事件
        // $('div').one('click',function(){console.log('只能触发一次的基础绑定事件');})
        // 2-2.事件委托
        // $('div').one('click','p',function(){console.log('事件委托绑定事件');})
        // 2-3.批量绑定事件
        // $('div').one({
            // click:function(){console.log('鼠标点击事件')},
            // mouseover:function(){console.log('鼠标移入')},
            // mouseout:function(){console.log('鼠标移出');}
        // })


        // 3.hover()
        // 注意：jQuery 里面一个特殊的事件
        // 语法：元素集合.hover(移入时触发的函数,移出时触发的函数)
        // 当你只传递一个函数的时候，会在移入移出都触发
        $('div').hover(
            function(){console.log('函数1')},
            // function(){console.log('函数2')}
        )


        // 4.常用事件函数
        // jQuery() 把我们最常用到的一些事件，单独做成了事件函数
        // 我们通过调用这些事件函数，来达到绑定事件的效果
        // click() ,mouseover(), mouseout(), change(),...
        $('div').click(function(){console.log('点击事件');})
    </script>
</body>
</html>